<template>
  <div class='mult-opts'>
    <div class="item" v-for="(v, k) in list" :key="k">
      <component class="input-with-select lab" :is="v.struct" size="mini" v-model="v.label" @blur="tospan(k)" @click.stop="toinput(k)">{{v.struct === 'span' ? v.label : ''}}</component>
      <i class="el-tag__close el-icon-close" @click.stop="del(k)"></i>
    </div>
 </div>
</template>

<script>
/**
 * @author 'yejinbo'
 * @description `之前用来测试comjs目录下com.js组件的，实现类似el-select效果的测试，没什么用`
 */
export default {
  data () {
    return {
      list: []
    }
  },
  components: {
  },
  methods: {
    tospan (k) {
      this.list[k].struct = 'span'
      this.$forceUpdate()
    },
    toinput (k) {
      this.list[k].struct = 'el-input'
      this.$forceUpdate()
    }
  },
  async mounted () {
    let mutipleAttrs = this.$vnode.context.$attrs
    if (mutipleAttrs['dataUrl']) {
      const {data} = await this.$axios({
        method: 'get',
        url: mutipleAttrs.dataUrl
      })
      if (data.success) {
        this.list = data.data
      }
    }
  }
}
</script>

<style scoped lang="stylus">
    .item
      margin-top: 0.2rem
      display: flex
      flex: 1
      min-height: 1.8rem
      justify-content: space-between
      background-color: rgba(225, 225, 225, 0.8)
      align-items: center
      box-sizing: border-box
      .left
        flex: 0.55
        box-sizing: border-box
      span
        flex: 1
        display: inline-flex
        align-items: center
        padding-left: 15px
        height: 28px
</style>
